<template>
  <div class="box">
    <!-- ===================顶部form============================-->
    <div class="el-card_body">
      <el-form
        ref="carRegisterForm"
        :model="carRegisterForm"
        :rules="carRegisterRules"
        label-width="110px"
      >
        <el-row type="flex" justify="start">
          <el-col :span="8">
            <el-form-item label="运输任务编号:" prop="transportTaskId">
              <el-input
                v-model="carRegisterForm.transportTaskId"
                placeholder="请输入运输任务编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构:" prop="startAgencyId">
              <el-select
                :style="{ width: '100%' }"
                v-model="carRegisterForm.startAgencyId"
                placeholder="请选择起始地机构"
              >
                <el-option
                  v-for="(item, index) in carRegisterOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.startAgencyId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构:" prop="endAgencyId">
              <el-select
                :style="{ width: '100%' }"
                v-model="carRegisterForm.endAgencyId"
                placeholder="请选择目的地机构"
              >
                <el-option
                  v-for="(item, index) in carRegisterOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.endAgencyId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="回车时间:" prop="transportTaskId">
              <el-date-picker
                v-model="carRegisterForm.intoStorageStartTime"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '00:00:00']"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆是否可用:" prop="isAvailable">
              <el-select
                :style="{ width: '100%' }"
                v-model="carRegisterForm.isAvailable"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in carRegisterOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.isAvailable"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="btnbox">
              <el-button type="primary" size="medium" style="height: 40px"
                >搜索</el-button
              >
              <el-button size="medium">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- =====================table================================= -->
    <div class="el-card_body2">
      <template>
        <el-table
          :header-cell-style="{ background: '#f8faff', color: '#818693' }"
          :data="tableData"
          stripe
          style="width: 100%"
          size="mini"
        >
          <el-table-column
            prop="transportTaskId"
            label="运输任务编号"
            width="216"
          />
          <el-table-column
            prop="startAgencyName"
            label="起始地机构"
            width="216"
          />
          <el-table-column
            prop="endAgencyName"
            label="目的地机构"
            width="216"
          />
          <el-table-column
            prop="transportOrderNumber"
            label="运单数量"
            width="144"
          />
          <el-table-column prop="outStorageTime" label="出车时间" width="185" />
          <el-table-column
            prop="intoStorageTime"
            label="回车时间"
            width="192"
          />
          <el-table-column prop="licensePlate" label="车牌号码" width="185" />
          <el-table-column prop="isAvailable" label="车辆是否可用" width="144">
            <template slot-scope="scope">
              <span>{{ scope.row.isAvailable ? "可用" : "不可用" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="96">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium"
                :style="{ color: '#409EFF' }"
                @click="handleClick(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import { getCarRegisterList } from "@/api/car-register.js";
export default {
  data() {
    return {
      tableData: [],
      carRegisterForm: {
        transportTaskId: null,
        startAgencyId: null,
        endAgencyId: null,
        intoStorageStartTime: null,
        intoStorageEndTime: null,
        isAvailable: null,
        page: 1,
        pageSize: 10,
      },
      carRegisterRules: {},
      carRegisterOptions: [],
      // 时间选择器
    };
  },
  methods: {
    async getCarRegisterList() {
      const res = await getCarRegisterList(this.carRegisterForm);
      this.tableData = res.items;
    },
  },
  created() {
    this.getCarRegisterList();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.box {
  overflow: hidden;
  margin: 0 auto;
  background-color: #f3f4f7;
  margin-top: 10px;
}
.el-card_body {
  padding: 20px 0;
  background-color: #fff;
  .el-form {
    .el-row {
      flex-wrap: wrap;
      .btnbox {
        padding-left: 20px;
        .el-button {
          width: 90px;
        }
      }
    }
    .el-form-item {
      padding: 0 30px;
      .el-form-item__label {
        color: #20232a !important;
        font-weight: normal;
      }
    }
  }
}
.el-card_body2 {
  padding: 28px;
  margin-top: 20px;
  background-color: #ffffff;
  .el-table {
    border: 1px solid #ebeef5;
    font-size: 13px;
  }
}
</style>
